<!DOCTYPE html>
<html>
    <head>
        <title>My Website</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <!--link the style sheet-->
    </head>
    <body>
        <header id="main-header">
            <div class="container">
                <h1>My Website</h1>
            </div>
        </header>

        <nav id="navbar">
            <div class="container">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contacts</a></li>
                </ul>
            </div>
        </nav>

        <section id="showcase"> <!--this is an unique stuff thus given an id-->
            <div class="container">
                <h1>Header 1 os SC</h1>
            </div>
        </section>

        <div class="container">
            <section id="main">
                <h1>Welcome</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur alias quasi aspernatur, ratione, accusantium a officia ipsam ducimus laborum doloremque, harum expedita nam provident vitae! Assumenda sit magni minus voluptates.</p>
            </section>

            <section id="sidebar">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto impedit commodi perferendis culpa rerum mollitia accusantium ut, tempore repellat qui voluptatum laudantium molestias voluptatibus reiciendis veniam asperiores. Sunt, praesentium culpa.</p>
            </section>
        </div>

        <footer id="main-footer">
            <p>Copyright &copy; 2020 Genius Tintin</p>
        </footer>
        
    </body>
</html>